<template>
	<view>
		<view class="fm_box">
			<u-image width="100%" height="430rpx" :src="imgsrc"></u-image>
			<view class="movie_name mdx-center-xs">
				《绿皮书》
			</view>
		</view>
		<view class="mdx-center-min modeBox u-p-20">
			<view class="active_title">
				活动名称活动名称活动名称活动名称活动活动名称活动名称活动名称活动名称活动
			</view>
			<!-- 活动时间 -->
			<view class="actEndtime">
				活动时间：
			</view>
			<view class="actEndtime u-margin-top-10">
				2020年2月1日 00:00-2020年2月3日 00:00
			</view>

		</view>
		<!-- 任务状态 -->
		<view class="modeBox mdx-center-min state_box">
			<view class="u-flex stateLines u-flex u-row-between">
				<view class="left">任务状态</view>
				<view class="right">待领取</view>
			</view>
			<view class="u-flex stateLines u-flex u-row-between">
				<view class="left">总资金</view>
				<view class="right">1000</view>
			</view>
			<view class="u-flex stateLines u-flex u-row-between">
				<view class="left">总票数</view>
				<view class="right">100</view>
			</view>
			<view class="u-flex stateLines u-flex u-row-between">
				<view class="left">购票平台</view>
				<view class="right">猫眼、淘票票、支付宝、美团</view>
			</view>
		</view>
		<!-- 场次分布 -->
		<view class="modeBox mdx-center-min" style="border-radius: 10rpx;">
			<view class="u-flex top_th">
				<view class="lwidth">场次分布</view>
				<view class="mwidth">场次个数</view>
				<view class="mwidth">团长佣金</view>
				<view class="mwidth">团员佣金</view>
			</view>
			<view>
				<u-table class="" padding='20rpx 0'>
					<u-tr>
						<u-td>2020年2月2日</u-td>
					</u-tr>
					<u-tr>
						<u-td :tdStyle='tdStyle' width='40%'>8：00-12：00</u-td>
						<u-td :tdStyle='tdStyle' width="20%">100个</u-td>
						<u-td :tdStyle='tdStyle' width="20%">3元/张</u-td>
						<u-td :tdStyle='tdStyle' width="20%">0元/人</u-td>
					</u-tr>
					<u-tr>
						<u-td>2020年2月2日</u-td>
					</u-tr>
					<u-tr>
						<u-td :tdStyle='tdStyle' width='40%'>8：00-12：00</u-td>
						<u-td :tdStyle='tdStyle' width="20%">100个</u-td>
						<u-td :tdStyle='tdStyle' width="20%">3元/张</u-td>
						<u-td :tdStyle='tdStyle' width="20%">0元/人</u-td>
					</u-tr>
					<u-tr>
						<u-td :tdStyle='tdStyle' width='40%'>8：00-12：00</u-td>
						<u-td :tdStyle='tdStyle' width="20%">100个</u-td>
						<u-td :tdStyle='tdStyle' width="20%">3元/张</u-td>
						<u-td :tdStyle='tdStyle' width="20%">0元/人</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>

		<!-- 活动要求 -->
		<view class="modeBox mdx-center-min u-padding-20" v-if="state==1">
			<view class="actTitle">
				活动要求
			</view>
			<view class="">
				“我曾怀疑过自己感染了新冠病毒，但他们说
				美国首例在1月才被发现；但我以前也患过流感
				，症状从未如此严重，我觉得自己好像快要死
				了。疑点之四，作为世界最发达国家，美国防
				疫物资采购与调配信息何以如此混乱，以致于
				被媒体讥讽为很像“第三世界”。
			</view>
		</view>


		<view class="" v-if="state==2">
			<view style="padding-top: 100rpx;">
				<u-empty icon-size="200" text="失败原因失败原因" src="/static/images/fail.png"></u-empty>
			</view>
		</view>
		<!-- 失败原因失败原因 -->


		<!-- 提现任务 -->
		<view class="modeBox mdx-center-min state_box" v-if="state==3">
			<view class="u-flex stateLines u-flex u-row-between">
				<view class="left">可报销金额</view>
				<view class="right" style="color: #F65151;">￥30</view>
			</view>
			<view class="u-flex stateLines u-flex u-row-between">
				<view class="left">可领取金额</view>
				<view class="right" style="color: #F65151;">￥5</view>
			</view>
		</view>

		<view class="modeBox mdx-center-min state_box" v-if="state==3">
			<u-cell-item title="查看任务详情" @click="$mHelper.to('/pages/my/task/teamInfo')"></u-cell-item>
			<u-cell-item title="查看提交信息"></u-cell-item>
		</view>

		<!-- 失败原因失败原因 -->
		<u-gap height="180"></u-gap>
		<!-- 领取状态 -->
		<view class="mdx-center-xs bottom_pay" v-if="state==1||state==3">
			<u-button :custom-style="customStyle" :hair-line='false' @click="addAddress">{{state==3?'确认提现':'领取'}}
			</u-button>
		</view>

		<!-- 审核失败状态 -->
		<view class="mdx-center-xs bottom_pay u-flex u-row-between" v-else>
			<view style="width: 35%;">
				<u-button :custom-style="customNone" :hair-line='false' @click="addAddress">放弃任务</u-button>
			</view>
			<view style="width: 55%;">
				<u-button :custom-style="customStyle" :hair-line='false' @click="addAddress">重新申请</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgsrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnews.zlook.com%2Fuploadfile%2F2019%2F0412%2F20190412035854568.jpg&refer=http%3A%2F%2Fnews.zlook.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624695312&t=8ce226dff4e7c9bf44a47d00149d7b6c',
				tdStyle: {
					"padding": '10rpx 0'
				},
				customStyle: {
					color: 'red',
					background: '#FFEC3E',
					color: "#000",
					border: '#fff'
				},
				customNone: {
					color: "#999",
					fontWeight: '550'
				},
				//状态 1 领取，2审核失败 ，3 确认提现
				state: 1
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	.fm_box {
		position: relative;
	}

	.movie_name {
		position: absolute;
		bottom: 15rpx;
		color: #FFFFFF;
		font-size: 32rpx;
	}

	.active_title {
		margin: 20rpx 0;
		font-size: 30rpx;
		color: #333333;
		font-weight: 550;

	}

	.actEndtime {
		color: #666666;
	}

	.modeBox {
		background-color: #FFFFFF;
		box-shadow: 0 0 10rpx #dddddd;
		border-radius: 10rpx;
		margin-top: 40rpx;
		overflow: hidden;
	}

	.state_box {
		.stateLines {
			width: 94%;
			margin-left: 3%;
			padding: 25rpx 0;
			border-bottom: 1rpx solid #ddd;

			&:last-child {
				border: none;
			}

			.left {
				font-size: 30rpx;
				color: #888888;
			}

			.right {
				text-align: right;
				margin-left: 20rpx;
				flex: 1;
				font-size: 30rpx;
				font-weight: 400;
			}
		}
	}

	.top_th {
		background-color: #FFEC3E;
		text-align: center;
		padding: 25rpx 0;
	}

	.lwidth {
		width: 40%;
	}

	.mwidth {
		width: 20%;
	}

	.actTitle {
		margin-bottom: 20rpx;
		font-size: 32rpx;
		font-weight: 550;
	}

	.bottom_pay {
		position: fixed;
		bottom: 10rpx;
		width: 92%;
	}
</style>
